<template>
  <div class="app-container" style="padding-top: 0; padding-bottom: 0">
    <!-- highlight-current-row  是否要高亮当前行 -->
    <!-- row-click  当某一行被点击时会触发该事件 -->
    <el-table
      :data="table.tableData"
      style="width: 100%"
      ref="singleTable"
      @row-click="singleElection"
      highlight-current-row
    >
      <el-table-column align="center" width="55" label="选择">
        <template slot-scope="scope">
          <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
          <!-- 注意：这里写 &nbsp 的目的是為了页面不顯示内容，只顯示单选操作 -->
          <el-radio
            class="radio"
            v-model="templateSelection"
            :label="scope.row.id"
          >
            &nbsp;
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        width="180"
        label="報價編碼"
        align="center"
        prop="quoteCode"
      />
      <el-table-column
        show-overflow-tooltip
        width="130"
        label="標題"
        align="center"
        prop="quoteTitle"
      />
      <el-table-column
        show-overflow-tooltip
        label="報價人"
        align="center"
        prop="quoterName"
      />
      <el-table-column
        show-overflow-tooltip
        label="報價時間"
        align="center"
        prop="quoteTime"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.quoteTime, "{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        width="100"
        label="不含稅金額"
        align="center"
        prop="quoteAmount"
      />
      <el-table-column
        show-overflow-tooltip
        label="含稅金額"
        align="center"
        prop="quoteTaxAmount"
      />
      <el-table-column
        show-overflow-tooltip
        width="180"
        label="預約編碼"
        align="center"
        prop="reservationCode"
      />
      <el-table-column
        show-overflow-tooltip
        width="100"
        label="報價單狀態"
        align="center"
        prop="quoteStatus"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.quote_status"
            :value="scope.row.quoteStatus"
          />
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="報價有效期"
        align="center"
        prop="dueDate"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.dueDate, "{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        width="100"
        label="入賬銀行賬號"
        align="center"
        prop="inBankNo"
      />
      <el-table-column
        show-overflow-tooltip
        width="100"
        label="入賬銀行名稱"
        align="center"
        prop="inBankName"
      />
      <el-table-column
        show-overflow-tooltip
        label="備註"
        align="center"
        prop="remark"
      />
    </el-table>
    <pagination
      v-show="table.total > 0"
      :total="table.total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <div class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitForm">確 定</el-button>
    </div>
  </div>
</template>
      <script>
import { listQuote, getQuote } from "@/api/biz/quote";
export default {
  name: "TablePage5",
  dicts: ["quote_status"],
  props: ["selected"],
  data() {
    return {
      table: {
        total: 0,
        tableData: [],
      },
      //   当前选择的行的id
      templateSelection: this.selected,
      //   当前选择的行的数据
      checkList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  watch: {
    selected(value) {
      this.templateSelection = value;
    },
  },
  created() {
    this.getList();
  },
  methods: {
    singleElection(row) {
      // console.log(row);
      this.templateSelection = row.id;
      this.checkList = this.table.tableData.filter(
        (item) => item.id === row.id
      );
      console.log(`该行的编号為${row.id}`);
    },
    getList() {
      this.loading = true;
      listQuote(this.queryParams)
        .then((res) => {
          this.table.tableData = res.rows;
          this.table.total = res.total;
          this.table.tableData.map((item) => {
            if (this.templateSelection == item.id) {
              this.$refs.singleTable.setCurrentRow(item);
            }
          });
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
    },
    submitForm() {
      console.log(this.checkList);
      if (this.checkList.length == 0) {
        this.cancel();
      } else {
        //   getQuote
        getQuote(this.checkList[0].id).then((response) => {
          let obj = {
            id: this.checkList[0].id,
            quoteCode: response.data.quoteCode,
            customerId: response.data.customerId,
            customerCode: response.data.customerCode,
            customerName: response.data.customerName,

            inBankId: response.data.inBankId,
            inBankNo: response.data.inBankNo,
            inBankName: response.data.inBankName,
            inBankAccount: response.data.inBankAccount,
            taxRate: response.data.taxRate,
            taxAmount: response.data.taxAmount,
            quoteAmount: response.data.quoteAmount,
            quoteTaxAmount: response.data.quoteTaxAmount,
            validDays: response.data.validDays,
            remark: response.data.remark,
            bizQuoteItemList:response.data.bizQuoteItemList,
          };
          this.$emit("out_detail", obj);
        });
      }
    },
    cancel() {
      this.$emit("out_cancel");
    },
  },
};
</script>
      
      <style>
.el-radio__label {
  display: none;
}
.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
      
      